/*
 * This file is a copy of viewer.css,
 * modified by Carsten Allefeld 2020.
 *
 * Notice from the original file:
 * Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 
/* This stylesheet is intended for viewer.html.
 *   In order to make Atom theme variables usable, it is written in LESS.
 * However, since Atom's styles do not apply to the iframe containing
 * viewer.html, the stylesheet is compiled into CSS and injected it into an
 * empty style element in viewer.html. This is done in the injectStyle method of
 * PdfjsViewerView.
 */


// make Atom theme variables accessible
@import "ui-variables";
// make Atom's .scrollbars-visible-always accessible, used as a LESS mixin
@import "atom";
// make icon font accessible
@ifp: "../../node_modules/@fortawesome/fontawesome-free";
@font-face {
  font-family: 'Awesome Regular';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("@{ifp}/webfonts/fa-regular-400.eot");
  src: url("@{ifp}/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
    url("@{ifp}/webfonts/fa-regular-400.woff2") format("woff2"),
    url("@{ifp}/webfonts/fa-regular-400.woff") format("woff"),
    url("@{ifp}/webfonts/fa-regular-400.ttf") format("truetype"),
    url("@{ifp}/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
@font-face {
  font-family: 'Awesome Solid';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url("@{ifp}/webfonts/fa-solid-900.eot");
  src: url("@{ifp}/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
  url("@{ifp}/webfonts/fa-solid-900.woff2") format("woff2"),
  url("@{ifp}/webfonts/fa-solid-900.woff") format("woff"),
  url("@{ifp}/webfonts/fa-solid-900.ttf") format("truetype"),
  url("@{ifp}/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }


body {
  font-family: @font-family;
}

// styling for font-based icons, to be included via LESS mixin
.fonticon {
  // prefer line version, but supplement from solid version
  font-family: 'Awesome Regular', 'Awesome Solid';
  font-size: 14px/1;
  text-decoration: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  speak: none;
}

.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.2;
  line-height: 1.0;
}

.textLayer > span {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;

  background-color: rgb(180, 0, 170);
  border-radius: 4px;
}

.textLayer .highlight.begin {
  border-radius: 4px 0px 0px 4px;
}

.textLayer .highlight.end {
  border-radius: 0px 4px 4px 0px;
}

.textLayer .highlight.middle {
  border-radius: 0px;
}

.textLayer .highlight.selected {
  background-color: rgb(0, 100, 0);
}

.textLayer ::-moz-selection { background: rgb(0,0,255); }

.textLayer ::selection { background: rgb(0,0,255); }

.textLayer .endOfContent {
  display: block;
  position: absolute;
  left: 0px;
  top: 100%;
  right: 0px;
  bottom: 0px;
  z-index: -1;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.textLayer .endOfContent.active {
  top: 0px;
}


.annotationLayer section {
  position: absolute;
}

.annotationLayer .linkAnnotation > a,
.annotationLayer .buttonWidgetAnnotation.pushButton > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer .linkAnnotation > a:hover,
.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
  opacity: 0.2;
  background: #ff0;
  // box-shadow: 0px 2px 10px #ff0;
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
}

.annotationLayer .textWidgetAnnotation input,
.annotationLayer .textWidgetAnnotation textarea,
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
  background-color: rgba(0, 54, 255, 0.13);
  border: 1px solid transparent;
  box-sizing: border-box;
  font-size: 9px;
  height: 100%;
  margin: 0;
  padding: 0 3px;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
  border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
  // font: message-box;
  font-size: 9px;
  resize: none;
}

.annotationLayer .textWidgetAnnotation input[disabled],
.annotationLayer .textWidgetAnnotation textarea[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
  background: none;
  border: 1px solid transparent;
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation input:hover,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
  border: 1px solid #000;
}

.annotationLayer .textWidgetAnnotation input:focus,
.annotationLayer .textWidgetAnnotation textarea:focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
  background: none;
  border: 1px solid transparent;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
  transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
  transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
  border-radius: 50%;
  height: 50%;
  left: 30%;
  top: 20%;
  width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
  /*
   * Letter spacing is placed on the right side of each character. Hence, the
   * letter spacing of the last character may be placed outside the visible
   * area, causing horizontal scrolling. We avoid this by extending the width
   * when the element has focus and revert this when it loses focus.
   */
  width: 115%;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
}

.annotationLayer .popupWrapper {
  position: absolute;
  width: 20em;
}

.annotationLayer .popup {
  position: absolute;
  z-index: 200;
  max-width: 20em;
  background-color: #FFFF99;
  // box-shadow: 0px 2px 5px #888;
  border-radius: @component-border-radius;
  padding: 6px;
  margin-left: 5px;
  cursor: pointer;
  // font: message-box;
  font-size: 9px;
  word-wrap: break-word;
}

.annotationLayer .popup > * {
  font-size: 9px;
}

.annotationLayer .popup h1 {
  display: inline-block;
}

.annotationLayer .popup span {
  display: inline-block;
  margin-left: 5px;
}

.annotationLayer .popup p {
  border-top: 1px solid #333;
  margin-top: 2px;
  padding-top: 2px;
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .freeTextAnnotation,
.annotationLayer .lineAnnotation svg line,
.annotationLayer .squareAnnotation svg rect,
.annotationLayer .circleAnnotation svg ellipse,
.annotationLayer .polylineAnnotation svg polyline,
.annotationLayer .polygonAnnotation svg polygon,
.annotationLayer .caretAnnotation,
.annotationLayer .inkAnnotation svg polyline,
.annotationLayer .stampAnnotation,
.annotationLayer .fileAttachmentAnnotation {
  cursor: pointer;
}

.pdfViewer .canvasWrapper {
  overflow: hidden;
}

.pdfViewer .page {
  direction: ltr;
  width: 816px;
  height: 1056px;
  margin: 1px auto -8px auto;
  position: relative;
  overflow: visible;
  border: 9px solid transparent;
  background-clip: content-box;
  // -o-border-image: url(images/shadow.png) 9 9 repeat;
  //    border-image: url(images/shadow.png) 9 9 repeat;
  background-color: white;
}

.pdfViewer.removePageBorders .page {
  margin: 0px auto 10px auto;
  border: none;
}

.pdfViewer.singlePageView {
  display: inline-block;
}

.pdfViewer.singlePageView .page {
  margin: 0;
  border: none;
}

.pdfViewer.scrollHorizontal, .pdfViewer.scrollWrapped, .spread {
  margin-left: 3.5px;
  margin-right: 3.5px;
  text-align: center;
}

.pdfViewer.scrollHorizontal, .spread {
  white-space: nowrap;
}

.pdfViewer.removePageBorders,
.pdfViewer.scrollHorizontal .spread,
.pdfViewer.scrollWrapped .spread {
  margin-left: 0;
  margin-right: 0;
}

.spread .page,
.pdfViewer.scrollHorizontal .page,
.pdfViewer.scrollWrapped .page,
.pdfViewer.scrollHorizontal .spread,
.pdfViewer.scrollWrapped .spread {
  display: inline-block;
  vertical-align: middle;
}

.spread .page,
.pdfViewer.scrollHorizontal .page,
.pdfViewer.scrollWrapped .page {
  margin-left: -3.5px;
  margin-right: -3.5px;
}

.pdfViewer.removePageBorders .spread .page,
.pdfViewer.removePageBorders.scrollHorizontal .page,
.pdfViewer.removePageBorders.scrollWrapped .page {
  margin-left: 5px;
  margin-right: 5px;
}

.pdfViewer .page canvas {
  margin: 0;
  display: block;
}

.pdfViewer .page canvas[hidden] {
  display: none;
}

.pdfViewer .page .loadingIcon {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url('images/loading-icon.gif') center no-repeat;
}

.pdfPresentationMode .pdfViewer {
  margin-left: 0;
  margin-right: 0;
}

.pdfPresentationMode .pdfViewer .page,
.pdfPresentationMode .pdfViewer .spread {
  display: block;
}

.pdfPresentationMode .pdfViewer .page,
.pdfPresentationMode .pdfViewer.removePageBorders .page {
  margin-left: auto;
  margin-right: auto;
}

.pdfPresentationMode:-ms-fullscreen .pdfViewer .page {
  margin-bottom: 100% !important;
}

.pdfPresentationMode:-webkit-full-screen .pdfViewer .page {
  margin-bottom: 100%;
  border: 0;
}

.pdfPresentationMode:-moz-full-screen .pdfViewer .page {
  margin-bottom: 100%;
  border: 0;
}

.pdfPresentationMode:fullscreen .pdfViewer .page {
  margin-bottom: 100%;
  border: 0;
}

:root {
  --sidebar-width: 200px;
}

* {
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
  width: 100%;
  /* Font size is needed to make the activity bar the correct size. */
  font-size: 10px;
}

body {
  height: 100%;
  width: 100%;
  background-color: @pane-item-background-color;
  // background-image: url(images/texture.png);
}

body,
input,
button,
select {
  // font: message-box;
  outline: none;
}

.hidden {
  display: none !important;
}
[hidden] {
  display: none !important;
}

#viewerContainer.pdfPresentationMode:-ms-fullscreen {
  top: 0px !important;
  overflow: hidden !important;
}

#viewerContainer.pdfPresentationMode:-ms-fullscreen::-ms-backdrop {
  background-color: @app-background-color;
}

#viewerContainer.pdfPresentationMode:-webkit-full-screen {
  top: 0px;
  border-top: 2px solid transparent;
  background-color: @app-background-color;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
  -webkit-user-select: none;
          user-select: none;
}

#viewerContainer.pdfPresentationMode:-moz-full-screen {
  top: 0px;
  border-top: 2px solid transparent;
  background-color: @app-background-color;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
  -moz-user-select: none;
       user-select: none;
}

#viewerContainer.pdfPresentationMode:-ms-fullscreen {
  top: 0px;
  border-top: 2px solid transparent;
  background-color: @app-background-color;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
  -ms-user-select: none;
      user-select: none;
}

#viewerContainer.pdfPresentationMode:fullscreen {
  top: 0px;
  border-top: 2px solid transparent;
  background-color: @app-background-color;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.pdfPresentationMode:-webkit-full-screen a:not(.internalLink) {
  display: none;
}

.pdfPresentationMode:-moz-full-screen a:not(.internalLink) {
  display: none;
}

.pdfPresentationMode:-ms-fullscreen a:not(.internalLink) {
  display: none;
}

.pdfPresentationMode:fullscreen a:not(.internalLink) {
  display: none;
}

.pdfPresentationMode:-webkit-full-screen .textLayer > span {
  cursor: none;
}

.pdfPresentationMode:-moz-full-screen .textLayer > span {
  cursor: none;
}

.pdfPresentationMode:-ms-fullscreen .textLayer > span {
  cursor: none;
}

.pdfPresentationMode:fullscreen .textLayer > span {
  cursor: none;
}

.pdfPresentationMode.pdfPresentationModeControls > *,
.pdfPresentationMode.pdfPresentationModeControls .textLayer > span {
  cursor: default;
}

#outerContainer {
  width: 100%;
  height: 100%;
  position: relative;
  .scrollbars-visible-always(); // for Atom's scrollbar style
}

#sidebarContainer {
  position: absolute;
  top: 32px;
  bottom: 0;
  width: 200px; /* Here, and elsewhere below, keep the constant value for compatibility
                   with older browsers that lack support for CSS variables. */
  width: var(--sidebar-width);
  visibility: hidden;
  z-index: 100;
  border-top: 1px solid @overlay-border-color;

  transition-duration: 200ms;
  transition-timing-function: ease;
}
html[dir='ltr'] #sidebarContainer {
  transition-property: left;
  left: -200px;
  left: ~"calc(-1 * var(--sidebar-width))"; // protect from LESS compiler
  border-right: 1px solid @overlay-border-color;
}
html[dir='rtl'] #sidebarContainer {
  transition-property: right;
  right: -200px;
  right: ~"calc(-1 * var(--sidebar-width))"; // protect from LESS compiler
  border-left: 1px solid @overlay-border-color;
}

.loadingInProgress #sidebarContainer {
  top: 36px;
}

#outerContainer.sidebarResizing #sidebarContainer {
  /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
  transition-duration: 0s;
  /* Prevent e.g. the thumbnails being selected when the sidebar is resized. */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#outerContainer.sidebarMoving #sidebarContainer,
#outerContainer.sidebarOpen #sidebarContainer {
  visibility: visible;
}
html[dir='ltr'] #outerContainer.sidebarOpen #sidebarContainer {
  left: 0px;
}
html[dir='rtl'] #outerContainer.sidebarOpen #sidebarContainer {
  right: 0px;
}

#mainContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 320px;
}

#sidebarContent {
  top: 32px;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  width: 100%;
  background-color: @overlay-background-color;
}
html[dir='ltr'] #sidebarContent {
  left: 0;
  // box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
}
html[dir='rtl'] #sidebarContent {
  right: 0;
  // box-shadow: inset 1px 0 0 hsla(0,0%,0%,.25);
}

#viewerContainer {
  background-color: @app-background-color;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: 32px;
  right: 0;
  bottom: 0;
  left: 0;
  outline: none;
}
#viewerContainer:not(.pdfPresentationMode) {
  transition-duration: 200ms;
  transition-timing-function: ease;
}
html[dir='ltr'] #viewerContainer {
  // box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
}
html[dir='rtl'] #viewerContainer {
  // box-shadow: inset -1px 0 0 hsla(0,0%,100%,.05);
}

#outerContainer.sidebarResizing #viewerContainer {
  /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */
  transition-duration: 0s;
}

html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
  transition-property: left;
  left: 200px;
  left: var(--sidebar-width);
}
html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode) {
  transition-property: right;
  right: 200px;
  right: var(--sidebar-width);
}

.toolbar {
  position: relative;
  left: 0;
  right: 0;
  z-index: 9999;
  cursor: default;
}

#toolbarContainer {
  width: 100%;
}

#toolbarSidebar {
  width: 100%;
  height: 32px;
  background-color: @overlay-background-color;
  // background-image: url(images/texture.png),
  //                   linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
}
html[dir='ltr'] #toolbarSidebar {
  // box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
  //             inset 0 -1px 0 hsla(0,0%,100%,.05),
  //             0 1px 0 hsla(0,0%,0%,.15),
  //             0 0 1px hsla(0,0%,0%,.1);
}
html[dir='rtl'] #toolbarSidebar {
  // box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.25),
  //             inset 0 1px 0 hsla(0,0%,100%,.05),
  //             0 1px 0 hsla(0,0%,0%,.15),
  //             0 0 1px hsla(0,0%,0%,.1);
}

#sidebarResizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 200;
  cursor: ew-resize;
}
html[dir='ltr'] #sidebarResizer {
  right: -6px;
}
html[dir='rtl'] #sidebarResizer {
  left: -6px;
}

#toolbarContainer, .findbar, .secondaryToolbar {
  position: relative;
  height: 32px;
  background-color: @tool-panel-background-color;
  border-bottom: 1px solid @tab-border-color;
  // background-image: url(images/texture.png),
  //                   linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
}
html[dir='ltr'] #toolbarContainer, .findbar, .secondaryToolbar {
  // box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15),
  //             inset 0 -1px 0 hsla(0,0%,100%,.05),
  //             0 1px 0 hsla(0,0%,0%,.15),
  //             0 1px 1px hsla(0,0%,0%,.1);
}
html[dir='rtl'] #toolbarContainer, .findbar, .secondaryToolbar {
  // box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15),
  //             inset 0 -1px 0 hsla(0,0%,100%,.05),
  //             0 1px 0 hsla(0,0%,0%,.15),
  //             0 1px 1px hsla(0,0%,0%,.1);
}

#toolbarViewer,
#toolbarViewerLeft,
#toolbarViewerRight,
#toolbarViewerMiddle {
  height: 32px;
}

#loadingBar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: @pane-item-background-color;
  // border-bottom: 1px solid #333;
}

#loadingBar .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: @background-color-success;
  overflow: hidden;
  transition: width 200ms;
}

@-webkit-keyframes progressIndeterminate {
  0% { left: -142px; }
  100% { left: 0; }
}

@keyframes progressIndeterminate {
  0% { left: -142px; }
  100% { left: 0; }
}

#loadingBar .progress.indeterminate {
  background-color: @background-color-warning;
  transition: none;
}

#loadingBar .progress.indeterminate .glimmer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: ~"calc(100% + 150px)"; // protect from LESS compiler

  // background: repeating-linear-gradient(135deg,
  //                                       #bbb 0, #999 5px,
  //                                       #999 45px, #ddd 55px,
  //                                       #ddd 95px, #bbb 100px);

  -webkit-animation: progressIndeterminate 950ms linear infinite;

          animation: progressIndeterminate 950ms linear infinite;
}

.findbar, .secondaryToolbar {
  top: 32px;
  position: absolute;
  z-index: 10000;
  height: auto;
  min-width: 16px;
  padding: 0px 6px 0px 6px;
  margin: 4px 2px 4px 2px;
  color: @text-color;
  font-family: @font-family;
  font-size: 12px;
  line-height: 14px;
  text-align: left;
  cursor: default;
}

.findbar {
  min-width: 300px;
}
.findbar > div {
  height: 32px;
}
.findbar.wrapContainers > div {
  clear: both;
}
.findbar.wrapContainers > div#findbarMessageContainer {
  height: auto;
}
html[dir='ltr'] .findbar {
  left: 68px;
}
html[dir='rtl'] .findbar {
  right: 68px;
}

.findbar label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#findInput {
  width: 200px;
}
#findInput::-webkit-input-placeholder {
  // color: hsl(0, 0%, 75%);
}
#findInput::-moz-placeholder {
  font-style: italic;
}
#findInput:-ms-input-placeholder {
  font-style: italic;
}
#findInput::-ms-input-placeholder {
  font-style: italic;
}
#findInput::placeholder {
  font-style: italic;
}
#findInput[data-status="pending"] {
  background-image: url(images/loading-small.png);
  background-repeat: no-repeat;
  background-position: right;
}
html[dir='rtl'] #findInput[data-status="pending"] {
  background-position: left;
}

.secondaryToolbar {
  padding: 6px;
  height: auto;
  z-index: 30000;
}
html[dir='ltr'] .secondaryToolbar {
  right: 4px;
}
html[dir='rtl'] .secondaryToolbar {
  left: 4px;
}

#secondaryToolbarButtonContainer {
  max-width: 200px;
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: -4px;
}

#secondaryToolbarButtonContainer.hiddenScrollModeButtons > .scrollModeButtons,
#secondaryToolbarButtonContainer.hiddenSpreadModeButtons > .spreadModeButtons {
  display: none !important;
}

.doorHanger,
.doorHangerRight {
  border: 1px @overlay-border-color;
  border-radius: @component-border-radius;
  border-style: solid;
  // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.doorHanger:after, .doorHanger:before,
.doorHangerRight:after, .doorHangerRight:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.doorHanger:after,
.doorHangerRight:after {
  border-bottom-color: @overlay-border-color;
  border-width: 8px;
}
.doorHanger:before,
.doorHangerRight:before {
  border-bottom-color: @overlay-border-color;
  border-width: 9px;
}

html[dir='ltr'] .doorHanger:after,
html[dir='rtl'] .doorHangerRight:after {
  left: 13px;
  margin-left: -8px;
}

html[dir='ltr'] .doorHanger:before,
html[dir='rtl'] .doorHangerRight:before {
  left: 13px;
  margin-left: -9px;
}

html[dir='rtl'] .doorHanger:after,
html[dir='ltr'] .doorHangerRight:after {
  right: 13px;
  margin-right: -8px;
}

html[dir='rtl'] .doorHanger:before,
html[dir='ltr'] .doorHangerRight:before {
  right: 13px;
  margin-right: -9px;
}

#findResultsCount {
  // background-color: hsl(0, 0%, 85%);
  color: @text-color-info;
  text-align: center;
  padding: 3px 4px;
}

#findMsg {
  font-style: italic;
  color: @text-color;
}
#findMsg:empty {
  display: none;
}

#findInput.notFound {
  background-color: @background-color-error;
}

#toolbarViewerMiddle {
  // there's so much space now on the right side
  float: right
  // position: absolute;
  // left: 50%;
  // transform: translateX(-50%);
}

html[dir='ltr'] #toolbarViewerLeft,
html[dir='rtl'] #toolbarViewerRight {
  float: left;
}
html[dir='ltr'] #toolbarViewerRight,
html[dir='rtl'] #toolbarViewerLeft {
  float: right;
}
html[dir='ltr'] #toolbarViewerLeft > *,
html[dir='ltr'] #toolbarViewerMiddle > *,
html[dir='ltr'] #toolbarViewerRight > *,
html[dir='ltr'] .findbar * {
  position: relative;
  float: left;
}
html[dir='rtl'] #toolbarViewerLeft > *,
html[dir='rtl'] #toolbarViewerMiddle > *,
html[dir='rtl'] #toolbarViewerRight > *,
html[dir='rtl'] .findbar * {
  position: relative;
  float: right;
}

html[dir='ltr'] .splitToolbarButton {
  margin: 3px 2px 4px 0;
  display: inline-block;
}
html[dir='rtl'] .splitToolbarButton {
  margin: 3px 0 4px 2px;
  display: inline-block;
}
html[dir='ltr'] .splitToolbarButton > .toolbarButton {
  border-radius: 0;
  float: left;
}
html[dir='rtl'] .splitToolbarButton > .toolbarButton {
  border-radius: 0;
  float: right;
}

.toolbarButton,
.secondaryToolbarButton,
.overlayButton {
  border: 0 none;
  background: none;
  width: 32px;
  height: 25px;
}

.toolbarButton > span {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}

.toolbarButton[disabled],
.secondaryToolbarButton[disabled],
.overlayButton[disabled] {
  opacity: .5;
}

.splitToolbarButton.toggled .toolbarButton {
  margin: 0;
}

.splitToolbarButton:hover > .toolbarButton,
.splitToolbarButton:focus > .toolbarButton,
.splitToolbarButton.toggled > .toolbarButton,
.toolbarButton.textButton {
  background-color: @button-background-color;
  // background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  background-clip: padding-box;
  border: 1px solid @button-border-color;
  // border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
  // box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  //             0 0 1px hsla(0,0%,100%,.15) inset,
  //             0 1px 0 hsla(0,0%,100%,.05);
  transition-property: background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease;

}
.splitToolbarButton > .toolbarButton:hover,
.splitToolbarButton > .toolbarButton:focus,
.dropdownToolbarButton:hover,
.overlayButton:hover,
.overlayButton:focus,
.toolbarButton.textButton:hover,
.toolbarButton.textButton:focus {
  background-color: @button-background-color-hover;
  // box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  //             0 0 1px hsla(0,0%,100%,.15) inset,
  //             0 0 1px hsla(0,0%,0%,.05);
  z-index: 199;
}
.splitToolbarButton > .toolbarButton {
  position: relative;
}
html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
  position: relative;
  margin: 0;
  margin-right: -1px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  border-right-color: transparent;
}
html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
  position: relative;
  margin: 0;
  margin-left: -1px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-left-color: transparent;
}
.splitToolbarButtonSeparator {
  padding: 8px 0;
  width: 1px;
  background-color: @button-border-color;
  z-index: 99;
  // box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
  display: inline-block;
  margin: 5px 0;
}
html[dir='ltr'] .splitToolbarButtonSeparator {
  float: left;
}
html[dir='rtl'] .splitToolbarButtonSeparator {
  float: right;
}
.splitToolbarButton:hover > .splitToolbarButtonSeparator,
.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
  padding: 12px 0;
  margin: 1px 0;
  // box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
  transition-property: padding;
  transition-duration: 10ms;
  transition-timing-function: ease;
}

.toolbarButton,
.dropdownToolbarButton,
.secondaryToolbarButton,
.overlayButton {
  min-width: 16px;
  padding: 2px 6px 0;
  border: 1px solid transparent;
  border-radius: 2px;
  color: @text-color;
  font-size: 12px;
  line-height: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  /* Opera does not support user-select, use <... unselectable="on"> instead */
  cursor: default;
  transition-property: background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

html[dir='ltr'] .toolbarButton,
html[dir='ltr'] .overlayButton,
html[dir='ltr'] .dropdownToolbarButton {
  margin: 3px 2px 4px 0;
}
html[dir='rtl'] .toolbarButton,
html[dir='rtl'] .overlayButton,
html[dir='rtl'] .dropdownToolbarButton {
  margin: 3px 0 4px 2px;
}

.toolbarButton:hover,
.toolbarButton:focus,
.dropdownToolbarButton,
.overlayButton,
.secondaryToolbarButton:hover,
.secondaryToolbarButton:focus {
  background-color: @button-background-color-hover;
  // background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  background-clip: padding-box;
  border: 1px solid @button-border-color;
  // border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
  // box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  //             0 0 1px hsla(0,0%,100%,.15) inset,
  //             0 1px 0 hsla(0,0%,100%,.05);
}

.toolbarButton.toggled,
.splitToolbarButton.toggled > .toolbarButton.toggled,
.secondaryToolbarButton.toggled {
  background-color: @button-background-color-selected;
  color: @text-color-selected;
  // border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5);
  // box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
  //             0 0 1px hsla(0,0%,0%,.2) inset,
  //             0 1px 0 hsla(0,0%,100%,.05);
  transition-property: background-color, border-color;
  transition-duration: 10ms;
  transition-timing-function: linear;
}

.toolbarButton.toggled:hover:active,
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
.secondaryToolbarButton.toggled:hover:active {
  // background-color: hsla(0,0%,0%,.4);
  // border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55);
  // box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset,
  //             0 0 1px hsla(0,0%,0%,.3) inset,
  //             0 1px 0 hsla(0,0%,100%,.05);
}

.dropdownToolbarButton {
  width: 120px;
  max-width: 120px;
  padding: 0;
  overflow: hidden;
  // background: url(images/toolbarButton-menuArrows.png) no-repeat;
}
html[dir='ltr'] .dropdownToolbarButton {
  // background-position: 95%;
}
html[dir='rtl'] .dropdownToolbarButton {
  // background-position: 5%;
}

.dropdownToolbarButton > select {
  min-width: 140px;
  font-size: 12px;
  color: @text-color;
  margin: 0;
  padding: 3px 2px 2px;
  border: none;
  // background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */
}

.dropdownToolbarButton > select > option {
  background: @base-background-color;
}

#customScaleOption {
  display: none;
}

#pageWidthOption {
  // border-bottom: 1px rgba(255, 255, 255, .5) solid;
}

html[dir='ltr'] .splitToolbarButton:first-child,
html[dir='ltr'] .toolbarButton:first-child,
html[dir='rtl'] .splitToolbarButton:last-child,
html[dir='rtl'] .toolbarButton:last-child {
  margin-left: 4px;
}
html[dir='ltr'] .splitToolbarButton:last-child,
html[dir='ltr'] .toolbarButton:last-child,
html[dir='rtl'] .splitToolbarButton:first-child,
html[dir='rtl'] .toolbarButton:first-child {
  margin-right: 4px;
}

.toolbarButtonSpacer {
  width: 30px;
  display: inline-block;
  height: 1px;
}

html[dir='ltr'] #findPrevious {
  margin-left: 3px;
}
html[dir='ltr'] #findNext {
  margin-right: 3px;
}

html[dir='rtl'] #findPrevious {
  margin-right: 3px;
}
html[dir='rtl'] #findNext {
  margin-left: 3px;
}

.toolbarButton::before,
.secondaryToolbarButton::before {
  /* All matching images have a size of 16x16
   * All relevant containers have a size of 32x25 */
  // replaced by font icons scaled to 14px
  position: absolute;
  display: inline-block;
  top: 5px;
  left: 9px;
  width: 14px;
  height: 14px;
}

html[dir="ltr"] .secondaryToolbarButton::before {
  left: 4px;
}
html[dir="rtl"] .secondaryToolbarButton::before {
  right: 4px;
}

html[dir='ltr'] .toolbarButton#sidebarToggle::before {
  .fonticon();
  content: "\f2f6";     // Font Awesome "sign-in-alt"
}
html[dir='rtl'] .toolbarButton#sidebarToggle::before {
  .fonticon();
  content: "\f2f6";     // Font Awesome "sign-in-alt"
  transform: scaleX(-1);
}

// ltr vs rtl not necessary because icon is symmetric
.toolbarButton#secondaryToolbarToggle::before {
  .fonticon();
  content: "\f142";     // Font Awesome "ellipsis-v"
}

// unified previous/ltr and next/rtl
html[dir='ltr'] .toolbarButton.findPrevious::before,
html[dir='rtl'] .toolbarButton.findNext::before {
  .fonticon();
  content: "\f0d9";     // Font Awesome "caret-left"
}

// unified previous/rtl and next/ltr
html[dir='rtl'] .toolbarButton.findPrevious::before,
html[dir='ltr'] .toolbarButton.findNext::before {
  .fonticon();
  content: "\f0da";     // Font Awesome "caret-right"
}

// ltr vs rtl not necessary because icon is symmetric
.toolbarButton.pageUp::before {
  .fonticon();
  content: "\f106";     // Font Awesome "angle-up"
}

// ltr vs rtl not necessary because icon is symmetric
.toolbarButton.pageDown::before {
  .fonticon();
  content: "\f107";     // Font Awesome "angle-down"
}

.toolbarButton.zoomOut::before {
  .fonticon();
  content: "\f068";     // Font Awesome "minus"
}

.toolbarButton.zoomIn::before {
  .fonticon();
  content: "\f067";     // Font Awesome "plus"
}

.toolbarButton.presentationMode::before,
.secondaryToolbarButton.presentationMode::before {
  .fonticon();
  content: "\f065";     // Font Awesome "expand"
}

// disabled "print" because its useless to us
.toolbarButton.print,
.secondaryToolbarButton.print {
  display: none !important;
}
.toolbarButton.print::before,
.secondaryToolbarButton.print::before {
  // content: url(images/toolbarButton-print.png);
}


// disabled "openFile" because its useless to us
.toolbarButton.openFile,
.secondaryToolbarButton.openFile {
  display: none !important;
}
.toolbarButton.openFile::before,
.secondaryToolbarButton.openFile::before {
  // content: url(images/toolbarButton-openFile.png);
}


// disabled "download" because its useless to us
.toolbarButton.download,
.secondaryToolbarButton.download {
  display: none !important;
}
.toolbarButton.download::before,
.secondaryToolbarButton.download::before {
  // content: url(images/toolbarButton-download.png);
}

// disabled "bookmark" because its useless to us
.toolbarButton.bookmark,
.secondaryToolbarButton.bookmark {
  display: none !important;
  box-sizing: border-box;
  outline: none;
  padding-top: 4px;
  text-decoration: none;
}
.secondaryToolbarButton.bookmark {
  padding-top: 5px;
}

.bookmark[href='#'] {
  opacity: .5;
  pointer-events: none;
}

.toolbarButton.bookmark::before,
.secondaryToolbarButton.bookmark::before {
  // content: url(images/toolbarButton-bookmark.png);
}

#viewThumbnail.toolbarButton::before {
  .fonticon();
  content: "\f009";    // Font Awesome "th-large"
}

html[dir="ltr"] #viewOutline.toolbarButton::before {
  .fonticon();
  content: "\f036";    // Font Awesome "align-left"
}
html[dir="rtl"] #viewOutline.toolbarButton::before {
  .fonticon();
  content: "\f038";    // Font Awesome "align-right"
}

#viewAttachments.toolbarButton::before {
  .fonticon();
  content: "\f0c6";    // Font Awesome "paperclip"
}

#viewFind.toolbarButton::before {
  .fonticon();
  content: "\f002";    // Font Awesome "search"
}

// disabled sidebar notification because its useless to us
.toolbarButton.pdfSidebarNotification::after {
  position: absolute;
  display: none;
  top: 1px;
  /* Create a filled circle, with a diameter of 9 pixels, using only CSS: */
  content: '';
  background-color: #70DB55;
  height: 9px;
  width: 9px;
  border-radius: 50%;
}
html[dir='ltr'] .toolbarButton.pdfSidebarNotification::after {
  left: 17px;
}
html[dir='rtl'] .toolbarButton.pdfSidebarNotification::after {
  right: 17px;
}

.secondaryToolbarButton {
  position: relative;
  margin: 0 0 4px 0;
  padding: 3px 0 1px 0;
  height: auto;
  min-height: 25px;
  width: auto;
  min-width: 100%;
  white-space: normal;
}
html[dir="ltr"] .secondaryToolbarButton {
  padding-left: 24px;
  text-align: left;
}
html[dir="rtl"] .secondaryToolbarButton {
  padding-right: 24px;
  text-align: right;
}
html[dir="ltr"] .secondaryToolbarButton.bookmark {
  padding-left: 27px;
}
html[dir="rtl"] .secondaryToolbarButton.bookmark {
  padding-right: 27px;
}

html[dir="ltr"] .secondaryToolbarButton > span {
  padding-right: 4px;
}
html[dir="rtl"] .secondaryToolbarButton > span {
  padding-left: 4px;
}

.secondaryToolbarButton.firstPage::before {
  .fonticon();
  content: "\f102";     // Font Awesome "angle-double-up"
}

.secondaryToolbarButton.lastPage::before {
  .fonticon();
  content: "\f103";     // Font Awesome "angle-double-down"
}

.secondaryToolbarButton.rotateCcw::before {
  .fonticon();
  content: "\f01e";     // Font Awesome "redo"
}

.secondaryToolbarButton.rotateCw::before {
  .fonticon();
  content: "\f0e2";     // Font Awesome "undo"
}

.secondaryToolbarButton.selectTool::before {
  .fonticon();
  content: "\f246";     // Font Awesome "i-cursor"
}

.secondaryToolbarButton.handTool::before {
  .fonticon();
  content: "\f25a";     // Font Awesome "hand-pointer"
}

.secondaryToolbarButton.scrollVertical::before {
  .fonticon();
  content: "\f338";     // Font Awesome "arrows-alt-v"
}

.secondaryToolbarButton.scrollHorizontal::before {
  .fonticon();
  content: "\f337";     // Font Awesome "arrows-alt-h"
}

.secondaryToolbarButton.scrollWrapped::before {
  .fonticon();
  content: "\f0b2";     // Font Awesome "arrows-alt"
}

// hand-made icon™, because there was nothing suitable in Font Awesome free
.secondaryToolbarButton.spreadNone::before {
  .fonticon();
  font-family: @font-family;
  font-size: 8px;
  border: 1px solid;
  content: " ";
  width: 8px;
  margin-left: 3px;
  text-align: center;
}

// hand-made icon™, because there was nothing suitable in Font Awesome free
.secondaryToolbarButton.spreadOdd::before {
  .fonticon();
  font-family: @font-family;
  font-size: 8px;
  font-weight: bold;
  border: 1px solid;
  content: "1⏐2";
  text-align: center;
}

// hand-made icon™, because there was nothing suitable in Font Awesome free
.secondaryToolbarButton.spreadEven::before {
  .fonticon();
  font-family: @font-family;
  font-size: 8px;
  font-weight: bold;
  border: 1px solid;
  content: "2⏐3";
  text-align: center;
}

.secondaryToolbarButton.documentProperties::before {
  .fonticon();
  content: "\f05a";     // Font Awesome "info-circle"
}

// this separator doesn't make much sense with only one button left
.verticalToolbarSeparator {
  // display: block;
  // padding: 8px 0;
  // margin: 8px 4px;
  // width: 1px;
  // background-color: hsla(0,0%,0%,.5);
  // box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
}
html[dir='ltr'] .verticalToolbarSeparator {
  // margin-left: 2px;
}
html[dir='rtl'] .verticalToolbarSeparator {
  // margin-right: 2px;
}

.horizontalToolbarSeparator {
  display: block;
  margin: 0 0 4px 0;
  height: 1px;
  width: 100%;
  background-color: @tool-panel-border-color;
  // box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
}

.toolbarField {
  padding: 3px 6px;
  margin: 4px 0 4px 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: @input-background-color;
  // background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  background-clip: padding-box;
  border: 1px solid @input-border-color;
  // border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
  // box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
  //             0 1px 0 hsla(0,0%,100%,.05);
  color: @text-color;
  font-size: 12px;
  line-height: 14px;
  outline-style: none;
  transition-property: background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

.toolbarField[type=checkbox] {
  display: inline-block;
  margin: 8px 0px;
}

.toolbarField.pageNumber {
  -moz-appearance: textfield; /* hides the spinner in moz */
  min-width: 16px;
  text-align: right;
  width: 40px;
}

.toolbarField.pageNumber.visiblePageIsLoading {
  background-image: url(images/loading-small.png);
  background-repeat: no-repeat;
  background-position: 1px;
}

.toolbarField.pageNumber::-webkit-inner-spin-button,
.toolbarField.pageNumber::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.toolbarField:hover {
  // background-color: hsla(0,0%,100%,.11);
  // border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45);
}

.toolbarField:focus {
  // background-color: hsla(0,0%,100%,.15);
  // border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
}

.toolbarLabel {
  min-width: 16px;
  padding: 3px 6px 3px 2px;
  margin: 4px 2px 4px 0;
  border: 1px solid transparent;
  border-radius: 2px;
  color: @text-color;
  font-size: 12px;
  line-height: 14px;
  text-align: left;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}

#thumbnailView {
  position: absolute;
  width: ~"calc(100% - 60px)"; // protect from LESS compiler
  top: 0;
  bottom: 0;
  padding: 10px 30px 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#thumbnailView > a:active,
#thumbnailView > a:focus {
  outline: 0;
}

.thumbnail {
  margin: 0 10px 5px 10px;
}
html[dir='ltr'] .thumbnail {
  float: left;
}
html[dir='rtl'] .thumbnail {
  float: right;
}

#thumbnailView > a:last-of-type > .thumbnail {
  margin-bottom: 10px;
}

#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
  margin-bottom: 9px;
}

.thumbnail:not([data-loaded]) {
  border: 1px dashed @background-color-warning;
  margin: -1px 9px 4px 9px;
}

.thumbnailImage {
  border: 1px solid transparent;
  // box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0.8;
  z-index: 99;
  // background-color: white; // no idea where this applies
  background-clip: content-box;
}

.thumbnailSelectionRing {
  border-radius: 2px;
  padding: 7px;
}

a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
  opacity: .9;
}

a:focus > .thumbnail > .thumbnailSelectionRing,
.thumbnail:hover > .thumbnailSelectionRing {
  background-color: @background-color-selected;
  // background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  // background-clip: padding-box;
  // box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  //             0 0 1px hsla(0,0%,100%,.2) inset,
  //             0 0 1px hsla(0,0%,0%,.2);
  // color: hsla(0,0%,100%,.9);
}

.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
  // box-shadow: 0 0 0 1px hsla(0,0%,0%,.5);
  opacity: 1;
}

.thumbnail.selected > .thumbnailSelectionRing {
  background-color: @background-color-highlight;
  // background-clip: padding-box;
  // box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  //             0 0 1px hsla(0,0%,100%,.1) inset,
  //             0 0 1px hsla(0,0%,0%,.2);
  // color: hsla(0,0%,100%,1);
}

#outlineView,
#attachmentsView {
  position: absolute;
  width: ~"calc(100% - 8px)"; // protect from LESS compiler
  top: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#outlineView {
  padding: 4px 4px 0;
}
#attachmentsView {
  padding: 3px 4px 0;
}

html[dir='ltr'] .outlineWithDeepNesting > .outlineItem,
html[dir='ltr'] .outlineItem > .outlineItems {
  margin-left: 20px;
}

html[dir='rtl'] .outlineWithDeepNesting > .outlineItem,
html[dir='rtl'] .outlineItem > .outlineItems {
  margin-right: 20px;
}

.outlineItem > a,
.attachmentsItem > button {
  text-decoration: none;
  display: inline-block;
  min-width: 95%;
  min-width: ~"calc(100% - 4px)"; /* Subtract the right padding (left, in RTL mode)
                                  of the container. */ // protect from LESS compiler
  height: auto;
  margin-bottom: 1px;
  border-radius: 2px;
  color: @text-color;
  font-size: 13px;
  line-height: 15px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: normal;
}

.attachmentsItem > button {
  border: 0 none;
  background: none;
  cursor: pointer;
  width: 100%;
}

html[dir='ltr'] .outlineItem > a {
  padding: 2px 0 5px 4px;
}
html[dir='ltr'] .attachmentsItem > button {
  padding: 2px 0 3px 7px;
  text-align: left;
}

html[dir='rtl'] .outlineItem > a {
  padding: 2px 4px 5px 0;
}
html[dir='rtl'] .attachmentsItem > button {
  padding: 2px 7px 3px 0;
  text-align: right;
}

.outlineItemToggler {
  position: relative;
  height: 0;
  width: 0;
  color: @text-color;
}
.outlineItemToggler::before {
  .fonticon();
  content: "\f107";     // Font Awesome "angle-down"
  display: inline-block;
  position: absolute;
}
html[dir='ltr'] .outlineItemToggler.outlineItemsHidden::before {
  .fonticon();
  content: "\f105";     // Font Awesome "angle-right"
}
html[dir='rtl'] .outlineItemToggler.outlineItemsHidden::before {
  .fonticon();
  content: "\f104";     // Font Awesome "angle-right"
}
.outlineItemToggler.outlineItemsHidden ~ .outlineItems {
  display: none;
}
html[dir='ltr'] .outlineItemToggler {
  float: left;
}
html[dir='rtl'] .outlineItemToggler {
  float: right;
}
html[dir='ltr'] .outlineItemToggler::before {
  right: 4px;
}
html[dir='rtl'] .outlineItemToggler::before {
  left: 4px;
}

.outlineItemToggler:hover,
.outlineItemToggler:hover + a,
.outlineItemToggler:hover ~ .outlineItems,
.outlineItem > a:hover,
.attachmentsItem > button:hover {
  background-color: @background-color-highlight;
  // background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  // background-clip: padding-box;
  // box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  //             0 0 1px hsla(0,0%,100%,.2) inset,
  //             0 0 1px hsla(0,0%,0%,.2);
  border-radius: 2px;
  color: @text-color-highlight;
}

.outlineItem.selected {
  background-color: @background-color-selected;
  // background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
  // background-clip: padding-box;
  // box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
  //             0 0 1px hsla(0,0%,100%,.1) inset,
  //             0 0 1px hsla(0,0%,0%,.2);
  color: @text-color-selected;
}

.noResults {
  font-size: 12px;
  // color: hsla(0,0%,100%,.8); // no idea where this applies
  font-style: italic;
  cursor: default;
}

/* TODO: file FF bug to support ::-moz-selection:window-inactive
   so we can override the opaque grey background when the window is inactive;
   see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
::-moz-selection { background: @overlay-background-color; }
::selection {
  background: @overlay-background-color;
}

#errorWrapper {
  background: none repeat scroll 0 0 @background-color-error;
  color: @text-color-highlight;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1000;
  padding: 3px;
  padding-left: 1em; // let it breathe
  padding-right: 1em;
  font-size: @font-size;
}
.loadingInProgress #errorWrapper {
  top: 37px;
}

#errorMessageLeft {
  float: left;
}

#errorMessageRight {
  float: right;
}

// what can I say, I care about error boxes
#errorShowMore, #errorShowLess, #errorClose {
  font-size: @font-size;
  background-color: @button-background-color;
  color: @text-color-highlight;
  border-color: @button-border-color;
  margin-left: 1em;
  margin-right: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

#errorMoreInfo {
  background-color: @inset-panel-background-color;
  color: @text-color-highlight;
  border-color: @inset-panel-border-color;
  font-weight: bold;
  padding: 3px;
  margin: 3px;
  width: 98%;
}

.overlayButton {
  width: auto;
  margin: 3px 4px 2px 4px !important;
  padding: 2px 6px 3px 6px;
}

#overlayContainer {
  display: table;
  position: absolute;
  width: 100%;
  height: 100%;
  // preserve transparency of overlay container
  background-color: fade(@overlay-background-color, 20%);
  z-index: 40000;
}
#overlayContainer > * {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#overlayContainer > .container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

#overlayContainer > .container > .dialog {
  display: inline-block;
  padding: 15px;
  border-spacing: 4px;
  color: @text-color;
  font-size: 12px;
  line-height: 14px;
  // but keep overlay dialog opaque
  opacity: 1;	
  background-color: @inset-panel-background-color;  //COLOR
  // background-image: url(images/texture.png),
  //                   linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
  // box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
  //             inset 0 1px 1px hsla(0,0%,0%,.15),
  //             inset 0 -1px 0 hsla(0,0%,100%,.05),
  //             0 1px 0 hsla(0,0%,0%,.15),
  //             0 1px 1px hsla(0,0%,0%,.1);
  border: 1px solid @inset-panel-border-color; //COLOR
  border-radius: 4px;
  // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.dialog > .row {
  display: table-row;
}

.dialog > .row > * {
  display: table-cell;
}

.dialog .toolbarField {
  margin: 5px 0;
}

.dialog .separator {
  display: block;
  margin: 4px 0 4px 0;
  height: 1px;
  width: 100%;
  background-color: @inset-panel-border-color;
  // box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
}

.dialog .buttonRow {
  text-align: center;
  vertical-align: middle;
}

.dialog :link {
  color: @text-color-info;
}

#passwordOverlay > .dialog {
  text-align: center;
}
#passwordOverlay .toolbarField {
  width: 200px;
}

#documentPropertiesOverlay > .dialog {
  text-align: left;
}
#documentPropertiesOverlay .row > * {
  min-width: 100px;
}
html[dir='ltr'] #documentPropertiesOverlay .row > * {
  text-align: left;
}
html[dir='rtl'] #documentPropertiesOverlay .row > * {
  text-align: right;
}
#documentPropertiesOverlay .row > span {
  width: 125px;
  word-wrap: break-word;
}
#documentPropertiesOverlay .row > p {
  max-width: 225px;
  word-wrap: break-word;
}
#documentPropertiesOverlay .buttonRow {
  margin-top: 10px;
}

.clearBoth {
  clear: both;
}

.fileInput {
  // background: white; // no idea where this applies
  // color: black; // no idea where this applies
  margin-top: 5px;
  visibility: hidden;
  position: fixed;
  right: 0;
  top: 0;
}

#PDFBug {
  background: none repeat scroll 0 0 white;
  border: 1px solid #666666;
  position: fixed;
  top: 32px;
  right: 0;
  bottom: 0;
  font-size: 10px;
  padding: 0;
  width: 300px;
}
#PDFBug .controls {
    background:#EEEEEE;
    border-bottom: 1px solid #666666;
    padding: 3px;
}
#PDFBug .panels {
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  right: 0;
  top: 27px;
}
#PDFBug button.active {
  font-weight: bold;
}
.debuggerShowText {
  background: none repeat scroll 0 0 yellow;
  color: blue;
}
.debuggerHideText:hover {
  background: none repeat scroll 0 0 yellow;
}
#PDFBug .stats {
  font-family: monospace;
  font-size: 10px;
  white-space: pre;
}
#PDFBug .stats .title {
    font-weight: bold;
}
#PDFBug table {
  font-size: 10px;
}

#viewer.textLayer-visible .textLayer {
  opacity: 1.0;
}

#viewer.textLayer-visible .canvasWrapper {
  // background-color: rgb(128,255,128); // no idea where this applies
}

#viewer.textLayer-visible .canvasWrapper canvas {
  mix-blend-mode: screen;
}

#viewer.textLayer-visible .textLayer > span {
  // background-color: rgba(255, 255, 0, 0.1); // no idea where this applies
  // color: black; // no idea where this applies
  // border: solid 1px rgba(255, 0, 0, 0.5); // no idea where this applies
  box-sizing: border-box;
}

#viewer.textLayer-hover .textLayer > span:hover {
  // background-color: white; // no idea where this applies
  // color: black; // no idea where this applies
}

#viewer.textLayer-shadow .textLayer > span {
  // background-color: rgba(255,255,255, .6); // no idea where this applies
  // color: black; // no idea where this applies
}

.grab-to-pan-grab {
  // cursor: url("images/grab.cur"), move !important;
  cursor: -webkit-grab !important;
  cursor: grab !important;
}
.grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) {
  cursor: inherit !important;
}
.grab-to-pan-grab:active,
.grab-to-pan-grabbing {
  // cursor: url("images/grabbing.cur"), move !important;
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;

  position: fixed;
  background: transparent;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 50000; /* should be higher than anything else in PDF.js! */
}

@page {
  margin: 0;
}

#printContainer {
  display: none;
}

// no support for Retina screens, I'm afraid
// @media screen and (-webkit-min-device-pixel-ratio: 1.1), screen and (min-resolution: 1.1dppx) {
//   /* Rules for Retina screens */
//   .toolbarButton::before {
//     transform: scale(0.5);
//     top: -5px;
//   }
// 
//   .secondaryToolbarButton::before {
//     transform: scale(0.5);
//     top: -4px;
//   }
// 
//   html[dir='ltr'] .toolbarButton::before,
//   html[dir='rtl'] .toolbarButton::before {
//     left: -1px;
//   }
// 
//   html[dir='ltr'] .secondaryToolbarButton::before {
//     left: -2px;
//   }
//   html[dir='rtl'] .secondaryToolbarButton::before {
//     left: 186px;
//   }
// 
//   .toolbarField.pageNumber.visiblePageIsLoading,
//   #findInput[data-status="pending"] {
//     background-image: url(images/loading-small@2x.png);
//     background-size: 16px 17px;
//   }
// 
//   .dropdownToolbarButton {
//     background: url(images/toolbarButton-menuArrows@2x.png) no-repeat;
//     background-size: 7px 16px;
//   }
// 
//   html[dir='ltr'] .toolbarButton#sidebarToggle::before {
//     content: url(images/toolbarButton-sidebarToggle@2x.png);
//   }
//   html[dir='rtl'] .toolbarButton#sidebarToggle::before {
//     content: url(images/toolbarButton-sidebarToggle-rtl@2x.png);
//   }
// 
//   html[dir='ltr'] .toolbarButton#secondaryToolbarToggle::before {
//     content: url(images/toolbarButton-secondaryToolbarToggle@2x.png);
//   }
//   html[dir='rtl'] .toolbarButton#secondaryToolbarToggle::before {
//     content: url(images/toolbarButton-secondaryToolbarToggle-rtl@2x.png);
//   }
// 
//   html[dir='ltr'] .toolbarButton.findPrevious::before {
//     content: url(images/findbarButton-previous@2x.png);
//   }
//   html[dir='rtl'] .toolbarButton.findPrevious::before {
//     content: url(images/findbarButton-previous-rtl@2x.png);
//   }
// 
//   html[dir='ltr'] .toolbarButton.findNext::before {
//     content: url(images/findbarButton-next@2x.png);
//   }
//   html[dir='rtl'] .toolbarButton.findNext::before {
//     content: url(images/findbarButton-next-rtl@2x.png);
//   }
// 
//   html[dir='ltr'] .toolbarButton.pageUp::before {
//     content: url(images/toolbarButton-pageUp@2x.png);
//   }
//   html[dir='rtl'] .toolbarButton.pageUp::before {
//     content: url(images/toolbarButton-pageUp-rtl@2x.png);
//   }
// 
//   html[dir='ltr'] .toolbarButton.pageDown::before {
//     content: url(images/toolbarButton-pageDown@2x.png);
//   }
//   html[dir='rtl'] .toolbarButton.pageDown::before {
//     content: url(images/toolbarButton-pageDown-rtl@2x.png);
//   }
// 
//   .toolbarButton.zoomIn::before {
//     content: url(images/toolbarButton-zoomIn@2x.png);
//   }
// 
//   .toolbarButton.zoomOut::before {
//     content: url(images/toolbarButton-zoomOut@2x.png);
//   }
// 
//   .toolbarButton.presentationMode::before,
//   .secondaryToolbarButton.presentationMode::before {
//     content: url(images/toolbarButton-presentationMode@2x.png);
//   }
// 
//   .toolbarButton.print::before,
//   .secondaryToolbarButton.print::before {
//     content: url(images/toolbarButton-print@2x.png);
//   }
// 
//   .toolbarButton.openFile::before,
//   .secondaryToolbarButton.openFile::before {
//     content: url(images/toolbarButton-openFile@2x.png);
//   }
// 
//   .toolbarButton.download::before,
//   .secondaryToolbarButton.download::before {
//     content: url(images/toolbarButton-download@2x.png);
//   }
// 
//   .toolbarButton.bookmark::before,
//   .secondaryToolbarButton.bookmark::before {
//     content: url(images/toolbarButton-bookmark@2x.png);
//   }
// 
//   #viewThumbnail.toolbarButton::before {
//     content: url(images/toolbarButton-viewThumbnail@2x.png);
//   }
// 
//   html[dir="ltr"] #viewOutline.toolbarButton::before {
//     content: url(images/toolbarButton-viewOutline@2x.png);
//   }
//   html[dir="rtl"] #viewOutline.toolbarButton::before {
//     content: url(images/toolbarButton-viewOutline-rtl@2x.png);
//   }
// 
//   #viewAttachments.toolbarButton::before {
//     content: url(images/toolbarButton-viewAttachments@2x.png);
//   }
// 
//   #viewFind.toolbarButton::before {
//     content: url(images/toolbarButton-search@2x.png);
//   }
// 
//   .secondaryToolbarButton.firstPage::before {
//     content: url(images/secondaryToolbarButton-firstPage@2x.png);
//   }
// 
//   .secondaryToolbarButton.lastPage::before {
//     content: url(images/secondaryToolbarButton-lastPage@2x.png);
//   }
// 
//   .secondaryToolbarButton.rotateCcw::before {
//     content: url(images/secondaryToolbarButton-rotateCcw@2x.png);
//   }
// 
//   .secondaryToolbarButton.rotateCw::before {
//     content: url(images/secondaryToolbarButton-rotateCw@2x.png);
//   }
// 
//   .secondaryToolbarButton.selectTool::before {
//     content: url(images/secondaryToolbarButton-selectTool@2x.png);
//   }
// 
//   .secondaryToolbarButton.handTool::before {
//     content: url(images/secondaryToolbarButton-handTool@2x.png);
//   }
// 
//   .secondaryToolbarButton.scrollVertical::before {
//     content: url(images/secondaryToolbarButton-scrollVertical@2x.png);
//   }
// 
//   .secondaryToolbarButton.scrollHorizontal::before {
//     content: url(images/secondaryToolbarButton-scrollHorizontal@2x.png);
//   }
// 
//   .secondaryToolbarButton.scrollWrapped::before {
//     content: url(images/secondaryToolbarButton-scrollWrapped@2x.png);
//   }
// 
//   .secondaryToolbarButton.spreadNone::before {
//     content: url(images/secondaryToolbarButton-spreadNone@2x.png);
//   }
// 
//   .secondaryToolbarButton.spreadOdd::before {
//     content: url(images/secondaryToolbarButton-spreadOdd@2x.png);
//   }
// 
//   .secondaryToolbarButton.spreadEven::before {
//     content: url(images/secondaryToolbarButton-spreadEven@2x.png);
//   }
// 
//   .secondaryToolbarButton.documentProperties::before {
//     content: url(images/secondaryToolbarButton-documentProperties@2x.png);
//   }
// 
//   .outlineItemToggler::before {
//     transform: scale(0.5);
//     top: -1px;
//     content: url(images/treeitem-expanded@2x.png);
//   }
//   html[dir='ltr'] .outlineItemToggler.outlineItemsHidden::before {
//     content: url(images/treeitem-collapsed@2x.png);
//   }
//   html[dir='rtl'] .outlineItemToggler.outlineItemsHidden::before {
//     content: url(images/treeitem-collapsed-rtl@2x.png);
//   }
//   html[dir='ltr'] .outlineItemToggler::before {
//     right: 0;
//   }
//   html[dir='rtl'] .outlineItemToggler::before {
//     left: 0;
//   }
// }

// no support for print
// @media print {
//   /* General rules for printing. */
//   body {
//     background: transparent none;
//   }
// 
//   /* Rules for browsers that don't support mozPrintCallback. */
//   #sidebarContainer, #secondaryToolbar, .toolbar, #loadingBox, #errorWrapper, .textLayer {
//     display: none;
//   }
//   #viewerContainer {
//     overflow: visible;
//   }
// 
//   #mainContainer, #viewerContainer, .page, .page canvas {
//     position: static;
//     padding: 0;
//     margin: 0;
//   }
// 
//   .page {
//     float: left;
//     display: none;
//     border: none;
//     box-shadow: none;
//     background-clip: content-box;
//     background-color: white;
//   }
// 
//   .page[data-loaded] {
//     display: block;
//   }
// 
//   .fileInput {
//     display: none;
//   }
// 
//   /* Rules for browsers that support PDF.js printing */
//   body[data-pdfjsprinting] #outerContainer {
//     display: none;
//   }
//   body[data-pdfjsprinting] #printContainer {
//     display: block;
//   }
//   #printContainer {
//     height: 100%;
//   }
//   /* wrapper around (scaled) print canvas elements */
//   #printContainer > div {
//     position: relative;
//     top: 0;
//     left: 0;
//     width: 1px;
//     height: 1px;
//     overflow: visible;
//     page-break-after: always;
//     page-break-inside: avoid;
//   }
//   #printContainer canvas,
//   #printContainer img {
//     display: block;
//   }
// }

.visibleLargeView,
.visibleMediumView,
.visibleSmallView {
  display: none;
}

@media all and (max-width: 900px) {
  #toolbarViewerMiddle {
    display: table;
    margin: auto;
    left: auto;
    position: inherit;
    transform: none;
  }
}

@media all and (max-width: 840px) {
  #sidebarContent {
    background-color: fade(@overlay-background-color, 70%);
  }

  html[dir='ltr'] #outerContainer.sidebarOpen #viewerContainer {
    left: 0px !important;
  }
  html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer {
    right: 0px !important;
  }

  #outerContainer .hiddenLargeView,
  #outerContainer .hiddenMediumView {
    display: inherit;
  }
  #outerContainer .visibleLargeView,
  #outerContainer .visibleMediumView {
    display: none;
  }
}


// by hiding 4 buttons, we now have 4×32 = 128 pixels more space
// subtract that from max-width values

@media all and (max-width: 642px) {
  #outerContainer .hiddenLargeView {
    display: none;
  }
  #outerContainer .visibleLargeView {
    display: inherit;
  }
}


@media all and (max-width: 572px) {
  #outerContainer .hiddenMediumView {
    display: none;
  }
  #outerContainer .visibleMediumView {
    display: inherit;
  }
}

@media all and (max-width: 512px) {
  .hiddenSmallView, .hiddenSmallView * {
    display: none;
  }
  .visibleSmallView {
    display: inherit;
  }
  .toolbarButtonSpacer {
    width: 0;
  }
  html[dir='ltr'] .findbar {
    left: 38px;
  }
  html[dir='rtl'] .findbar {
    right: 38px;
  }
}

@media all and (max-width: 407px) {
  #scaleSelectContainer {
    display: none;
  }
}
